<template>
    <h2>cccc</h2>
    firstname:<input type="text" v-model="firstname"><br>
    lastname:<input type="text" v-model="lastname"><br>
    {{firstname+'.'+lastname}}<br>
    {{fullname}}<br>
</template>

<script>
    import {reactive, toRefs, computed} from 'vue'

    export default {
        name: "ComputedDemo",
        setup() {
            const user = reactive({
                firstname: 'x',
                lastname: 'zc'
            });

            let fullname = computed(() => {
                return user.firstname + '.' + user.lastname
            })

            return {
                ...toRefs(user),
                fullname
            }
        }
    }
</script>

<style scoped>

</style>
